// 容器混合器
@mixin callkit-container {
  // max-width: $container-max-width;
  // max-height: $container-max-height;
  width: 100%;
  height: 100%;
  // padding: $container-padding;
  box-sizing: border-box;
  border-radius: $container-border-radius;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 空状态混合器
@mixin empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-color;
  font-size: 16px;
  opacity: 0.6;
}

// 视频窗口基础样式
@mixin video-window-base {
  position: relative;
  background: $window-background;
  border-radius: $video-border-radius;
  overflow: hidden;
  cursor: pointer;
  transition: all $transition-fast;

  // border: $video-border-width solid $border-color;
  box-sizing: border-box;
  &:hover {
    border: $video-border-width solid $border-color-hover;
    // transform: scale(1.02);
  }
  
  // 🔧 修复群组通话本地视频窗口翻转问题
  // 确保本地视频窗口在所有情况下都保持正确的方向
  &[data-is-local="true"] {
    transform: scaleX(-1);
  }
}

// 本地视频窗口样式
@mixin video-window-local {
  border-color: $border-color-local;
  
  // .#{$cui-prefix}-callkit-nickname {
  //   background: rgba($border-color-local, 0.8);
  // }
}

// 视频容器
@mixin video-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  // 🔧 修复群组通话本地视频容器翻转问题
  // 确保视频容器不会被意外翻转，保持UI元素正确显示
  [data-is-local="true"] & {
    // transform: none !important;
    transform: scaleX(-1);
  }
}

// 视频元素
@mixin video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  
  // 🔧 本地视频镜像效果
  &[data-local="true"] {
    transform: scaleX(-1);
  }
  
  // 🔧 镜像视频类名（用于 VideoPlayer 组件）
  &.#{$cui-prefix}-callkit-video-mirror {
    transform: scaleX(-1);
  }
}

// 视频占位符
@mixin video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: $placeholder-background;
}

// 头像图片
@mixin avatar-image {
  width: $avatar-size;
  height: $avatar-size;
  border-radius: 50%;
  object-fit: cover;
}

// 头像占位符
@mixin avatar-placeholder {
  width: $avatar-size;
  height: $avatar-size;
  border-radius: 50%;
  background: #171A1C;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-color;
  font-size: 24px;
  font-weight: bold;
}

// 昵称标签
@mixin nickname-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: $gray-98;
  padding: 0px 4px;
  border-radius: 6px;
  font-size: 12px;
  backdrop-filter: blur(4px);
}

// 静音指示器
@mixin muted-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 0, 0, 0.8);
  color: $text-color;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
  display: none;
}

// 全屏模式
@mixin fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  z-index: $z-index-fullscreen;
  border-radius: 0;
}

// 响应式布局
@mixin responsive-layout {
  // 移动端
  @media (max-width: $breakpoint-mobile) {
    padding: 4px;
    
    .#{$cui-prefix}-callkit-avatar,
    .#{$cui-prefix}-callkit-avatar-placeholder {
      width: $avatar-size-small;
      height: $avatar-size-small;
      font-size: 18px;
    }
    
    .#{$cui-prefix}-callkit-nickname {
      font-size: 11px;
      // padding: 2px 6px;
    }
  }
  
  // 平板端
  @media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet) {
    padding: 6px;
  }
  
  // 桌面端
  @media (min-width: $breakpoint-desktop) {
    // padding: $container-padding;
  }
}

// Flex布局行
@mixin flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: inherit;
  flex: 0 0 auto;
  min-height: 0;
}

// Flex布局列
@mixin flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

// 视频包装器
@mixin video-wrapper {
  flex-shrink: 0;
  flex-grow: 0;
} 